<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }

      .rq {
        width: 546px;
        height: 400px;
        margin: auto;
        border: 1px solid black;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }

      .content {
        width: 173px;
        height: 252px;
        margin: 3px;
        border: 1px solid black;
        background-color: orange;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }

      .content li {
        width: calc((100% / 2) - 10px);
        height: calc((100% / 5) - 10px);
        background-color: pink;
        margin: 5px;
        text-align: center;
        line-height: 40px;
        color: white;
      }

      .ipt {
        width: calc((100% / 3) - 10px);
        height: 30px;
        outline: none;
        border: none;
        background-color: yellowgreen;
        margin: 0px 5px;
      }

      #btn {
        width: calc(100% - 10px);
        height: 50px;
        margin: 5px auto;
      }

      .open {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }

      .openlis {
        width: calc((100% / 3) - 10px);
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin: 0 5px;
        background-color: azure;
      }

      .mb {
        width: 100%;
        height: 100vh;
        background-color: red;
        position: fixed;
        top: 0;
        text-align: center;
        line-height: 100vh;
        color: white;
        font-size: 100px;
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="rq">
      <!-- 第一组 -->
      <ul class="content">
        <li class="con-1">1</li>
        <li class="con-1">2</li>
        <li class="con-1">3</li>
        <li class="con-1">4</li>
        <li class="con-1">5</li>
        <li class="con-1">6</li>
        <li class="con-1">7</li>
        <li class="con-1">8</li>
        <li class="con-1">9</li>
        <li class="con-1">10</li>
      </ul>
      <!-- 第二组 -->
      <ul class="content">
        <li class="con-2">1</li>
        <li class="con-2">2</li>
        <li class="con-2">3</li>
        <li class="con-2">4</li>
        <li class="con-2">5</li>
        <li class="con-2">6</li>
        <li class="con-2">7</li>
        <li class="con-2">8</li>
        <li class="con-2">9</li>
        <li class="con-2">10</li>
      </ul>
      <!-- 第三组 -->
      <ul class="content">
        <li class="con-3">1</li>
        <li class="con-3">2</li>
        <li class="con-3">3</li>
        <li class="con-3">4</li>
        <li class="con-3">5</li>
        <li class="con-3">6</li>
        <li class="con-3">7</li>
        <li class="con-3">8</li>
        <li class="con-3">9</li>
        <li class="con-3">10</li>
      </ul>
      <input class="ipt" placeholder="请输入1-10" type="text" />
      <input class="ipt" placeholder="请输入1-10" type="text" />
      <input class="ipt" placeholder="请输入1-10" type="text" />
      <button id="btn">开奖</button>
      <ul class="open">
        <li class="openlis">未开奖</li>
        <li class="openlis">未开奖</li>
        <li class="openlis">未开奖</li>
      </ul>
    </div>
    <div class="mb">恭喜中奖</div>
    <script>
      //获取元素
      var con_1 = document.getElementsByClassName("con-1");
      var con_2 = document.getElementsByClassName("con-2");
      var con_3 = document.getElementsByClassName("con-3");
      var ipts = document.getElementsByClassName("ipt");
      var btn = document.getElementById("btn");
      var mb = document.getElementsByClassName("mb")[0];
      var openlis = document.getElementsByClassName("openlis");
      // console.log(con_1,con_2,con_3,ipts,btn,mb,openlis)
      //点击赋值
      for (var i = 0; i < con_1.length; i++) {
        con_1[i].onclick = function () {
          for (var j = 0; j < con_1.length; j++) {
            if (con_1[j] == this) {
              ipts[0].value =
                con_1[j].innerHTML < 10
                  ? "0" + con_1[j].innerHTML
                  : con_1[j].innerHTML;
              con_1[j].style.backgroundColor = "red";
            } else {
              con_1[j].style.backgroundColor = "pink";
            }
          }
        };
      }
      for (var i = 0; i < con_1.length; i++) {
        con_2[i].onclick = function () {
          for (var j = 0; j < con_1.length; j++) {
            if (con_2[j] == this) {
              ipts[1].value =
                con_2[j].innerHTML < 10
                  ? "0" + con_2[j].innerHTML
                  : con_2[j].innerHTML;
              con_2[j].style.backgroundColor = "red";
            } else {
              con_2[j].style.backgroundColor = "pink";
            }
          }
        };
      }
      for (var i = 0; i < con_1.length; i++) {
        con_3[i].onclick = function () {
          for (var j = 0; j < con_1.length; j++) {
            if (con_3[j] == this) {
              ipts[2].value =
                con_3[j].innerHTML < 10
                  ? "0" + con_3[j].innerHTML
                  : con_3[j].innerHTML;
              con_3[j].style.backgroundColor = "red";
            } else {
              con_3[j].style.backgroundColor = "pink";
            }
          }
        };
      }
      //点击开奖
      btn.onclick = function () {
        var a = Math.floor(Math.random() * 10 + 1);
        var b = Math.floor(Math.random() * 10 + 1);
        var c = Math.floor(Math.random() * 10 + 1);
        console.log(a, b, c);
        //给开奖显示做赋值
        openlis[0].innerHTML = a < 10 ? "0" + a : a;
        openlis[1].innerHTML = b < 10 ? "0" + b : b;
        openlis[2].innerHTML = c < 10 ? "0" + c : c;

        //判断是否中奖
        if (
          ipts[0].value == openlis[0].innerHTML &&
          ipts[1].value == openlis[1].innerHTML &&
          ipts[2].value == openlis[2].innerHTML
        ) {
          mb.style.display = "block";
          mb.innerHTML = "恭喜中一等奖";
        } else if (
          (ipts[0].value == openlis[0].innerHTML &&
            ipts[1].value == openlis[1].innerHTML) ||
          (ipts[1].value == openlis[1].innerHTML &&
            ipts[2].value == openlis[2].innerHTML) ||
          (ipts[0].value == openlis[0].innerHTML &&
            ipts[2].value == openlis[2].innerHTML)
        ) {
          mb.style.display = "block";
          mb.innerHTML = "恭喜中二等奖";
        }
      };
      mb.onclick = function () {
        mb.style.display = "none";
      };
    </script>
  </body>
</html>
